<script setup lang="ts">
import { computed } from "vue";
import { useTheme, type ThemeType } from "@/composables/useTheme";
import { Brush, Check } from "@element-plus/icons-vue";

const { currentTheme, themeConfig, changeTheme } = useTheme();

// 主题选项数组
const themeOptions = computed(() => {
  return Object.entries(themeConfig).map(([key, config]) => ({
    value: key as ThemeType,
    ...config,
    // 为每个主题生成对应的阴影颜色
    shadowColor: getShadowColor(config.primaryColor)
  }));
});

// 根据主色调生成阴影颜色
const getShadowColor = (primaryColor: string) => {
  // 将十六进制颜色转换为 rgba 格式用于阴影
  const hex = primaryColor.replace("#", "");
  const r = parseInt(hex.substr(0, 2), 16);
  const g = parseInt(hex.substr(2, 2), 16);
  const b = parseInt(hex.substr(4, 2), 16);
  return `rgba(${r}, ${g}, ${b}, 0.3)`;
};

// 处理主题切换
const handleThemeChange = (theme: ThemeType) => {
  changeTheme(theme);
};
</script>

<template>
  <div class="theme-selector">
    <div class="theme-selector-header">
      <el-icon class="theme-icon">
        <Brush />
      </el-icon>
      <span class="theme-title">主题选择</span>
    </div>

    <div class="theme-options">
      <div
        v-for="option in themeOptions"
        :key="option.value"
        class="theme-option"
        :class="{ 'is-active': currentTheme === option.value }"
        :style="{
          '--theme-border-color': option.primaryColor,
          '--theme-shadow-color': option.shadowColor
        }"
        @click="handleThemeChange(option.value)"
      >
        <div
          class="theme-color-preview"
          :style="{ backgroundColor: option.primaryColor }"
        >
          <el-icon v-if="currentTheme === option.value" class="check-icon">
            <Check />
          </el-icon>
        </div>
        <div class="theme-info">
          <div class="theme-name">{{ option.name }}</div>
          <div class="theme-description">{{ option.description }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.theme-selector {
  padding: 16px;

  .theme-selector-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .theme-icon {
      font-size: 18px;
      color: #666;
      margin-right: 8px;
    }

    .theme-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
  }

  .theme-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
  }

  .theme-option {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 2px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      border-color: #ccc;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    &.is-active {
      border-color: var(--theme-border-color);
      box-shadow: 0 2px 12px var(--theme-shadow-color);
    }

    .theme-color-preview {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      margin-right: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .check-icon {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      }
    }

    .theme-info {
      flex: 1;

      .theme-name {
        font-size: 14px;
        font-weight: 500;
        color: #333;
        margin-bottom: 4px;
      }

      .theme-description {
        font-size: 12px;
        color: #666;
      }
    }
  }
}
</style>
